<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>房产信息管理系统</title>
	<load href='__PUBLIC__/css/bootstrap.min.css' />
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <load href='__PUBLIC__/js/bootstrap.min.js' />    
    <style type="text/css">
    	body { 
    		padding-top: 50px; 
    	}
    	#location-info{
    		margin: 15px auto;
    		padding: 20px;
    		border: 1px solid #28A4FF;
    	}
    	#label{
    		margin: 10px auto;
    	}
    	#pubbtn{
    		margin-top: 40px;
    		margin-left: 70px;
    	}
		.house-info{
			margin: 20px auto;
		}
		.filter{
    		margin-top: 20px;
    	}
		#reg{
    		margin-left: 20px;
    	}
    </style>
  </head>
  <body>
  	<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
	  <div class="container">
	    <div class="row">
	    	<div class="col-md-10">
	      		<a class="navbar-brand" href="javascript:;">
	        		<p>房产信息管理</p>
	      		</a>
	      	</div>
	      	<div class="col-md-2">
				<input id="login" type="button" class="btn btn-info navbar-btn navbar-left" value="登录">
	      		<input id="reg" type="button" class="btn btn-info navbar-btn navbar-middle" value="注册">
	      	</div>
	    </div>
	  </div>
	</nav>
	
	<div class="container">
		<div class="row">
			<div class="col-md-9"></div>
			<div class="col-md-1" id="pubbtn">
				<button class="btn btn-info" data-toggle="modal" data-target="#myModal">发布房屋信息</button>
			</div>
			<div class="col-md-1"></div>
		</div>
		<div class="row">
			<div class="col-md-1"></div>
		<div class="col-md-10"  id="location-info">
				<ul class="nav nav-tabs" role="tablist" id="mytab">
				  <!-- <li role="presentation" class="active"><a href="#xuzhou" role="tab" data-toggle="tab">徐州</a></li>-->
				  <li role="presentation" class="dropdown active">
				    <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="pname">
				    	{$location} <span class="caret"></span>
				    </a>
				    <ul class="dropdown-menu" role="menu">
				      <volist name="province" id="province">
				      		<li><a href="javascript:;" role="tab" data-toggle="tab" class="pro_a">{$province.name}</a></li>
				      </volist>
				    </ul>
				  </li>
				</ul>
				<div class="tab-content">
					<div role="tabpanel" class="tab-pane fade in active">
						<if condition="($location neq '上海市') OR ($location neq '北京市') OR ($location neq '天津市') OR ($location neq '重庆市')">
							<label id="clabel" >城市
								<volist name="city" id="city">
									<if condition="$i eq 1">
										<a class="btn city_a active" href="javascript:;">{$city.name}</a>
									<else/>
										<a class="btn city_a" href="javascript:;">{$city.name}</a>
									</if>
									<if condition="$i eq 8 ">
										<br><for start="1" end="10">&nbsp;</for>
									</if>
								</volist>
							</label>
						</if>
						<br />
						<label id="alabel" >地区
							<volist name="county" id="county">
								<if condition="$i eq 1">
										<a class="btn active area_a" href="javascript:;">{$county.name}</a>
									<else/>
										<a class="btn area_a" href="javascript:;">{$county.name}</a>
									</if>
								<if condition="$i eq 8 ">
									<br><for start="1" end="10">&nbsp;</for>
								</if>
							</volist>
						</label>
						<br />
						<label id="rlabel">租金&nbsp&nbsp
							<a class="btn active rent" href="javascript:;">不限</a>
							<a class="btn rent" href="javascript:;">500以下</a>	
							<a class="btn rent" href="javascript:;">500-1000</a>	
							<a class="btn rent" href="javascript:;">1000以上</a>
							<a class="btn rent" href="javascript:;">1000-2000</a>
							<a class="btn rent" href="javascript:;">2000-3000</a>
							<a class="btn rent" href="javascript:;">13000以上</a>	
						</label>
						<br />
						<label id="tlabel">厅室&nbsp&nbsp
							<a class="btn active type" href="javascript:;">不限</a>
							<a class="btn type" href="javascript:;">一室</a>	
							<a class="btn type" href="javascript:;">两室</a>	
							<a class="btn type" href="javascript:;">三室</a>
							<a class="btn type" href="javascript:;">三室以上</a>
						</label>
					</div>
				</div>
			</div>
			<div class="col-md-1"></div>
		</div>
		<hr />
		<div class="col-md-1"></div>
		<div class="col-md-10 house-info">
			<ul class="nav nav-pills" role="tablist">
			  <li role="presentation"><a href="__CONTROLLER__/index">出租房信息</a></li>
			  <li role="presentation"  class="active"><a href="__CONTROLLER__/wantedindex">求租房信息</a></li>
			</ul>
			<volist name="data" id="vo">
				<div class="filter">
					<table class="table table-bordered">
							<tr>
								<th><a style="text-decoration: none" href="__CONTROLLER__/towantedinfobefore/id/{$vo[id]}" id="towantinfo">{$vo.title}</a></th>
								<th>{$vo.rent}元/月</th>
								<th>{$vo.type}</th>
								<th>手机：{$vo.phone}</th>
							</tr>
					</table>
				</div>
			</volist>
		</div>
		<div class="col-md-1"></div>
		
		<div class="col-md-1"></div>
		<div class="col-md-8 col-md-offset-1">
			<nav>
			  <ul class="pagination">
			    <li><a href="__CONTROLLER__/wantedindex/pagenow/1">&laquo;</a></li>
			    <for start="1" end="$pagecount+1">
			    	<li><a href="__CONTROLLER__/wantedindex/pagenow/{$i}">{$i}</a></li>
			    </for>
			    <li><a href="__CONTROLLER__/wantedindex/pagenow/{$pagecount}">&raquo;</a></li>
			  </ul>
			</nav>
		</div>
		<div class="col-md-2"></div>
		
		<div class='row'>
			 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				  <div class="modal-dialog modal-sm">
				    <div class="modal-content">
				      <div class="modal-header">
				        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				        <h4 class="modal-title" id="myModalLabel">提示</h4>
				      </div>
				      <div class="modal-body">
				        	<h3 style="text-align: center;">请先登录</h3>
				      </div>
				      <div class="modal-footer">
				      	<button type="button" class="btn btn-primary" id="redirect">登录</button>
				        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				      </div>
				    </div>
			       </div>
			</div>
	    </div>
	</div>
</body>
  <script type="text/javascript">
	 $(function(){
			$(".pro_a").click(function(){
				var name=$(this).html();
				$.ajax({
					  type: "POST",
					  data:"provincename="+name,
					  url: "__CONTROLLER__/city",
					  dataType: "json",
					  success:function (data) { 
						  $("#pname").html(data.province+"<span class='caret'></span>");
						  if(data.province!="天津市"&&data.province!="北京市"){
							  $("#clabel").html("城市&nbsp&nbsp");
							  for(var i=0;i<data.city.length;i++){
								if(i==8){
									$("#clabel").append("<br>");
									for(var j=0;j<10;j++){
										$("#clabel").append("<span>&nbsp</span>");
									}
								}
								if(i==0){
									$("#clabel").append("<a class='btn active city_a' href='javascript:;'>"+data.city[i]+"</a>");
								}else{
							  		$("#clabel").append("<a class='btn city_a' href='javascript:;'>"+data.city[i]+"</a>");
								}
							  }
							  $(".city_a").click(cityClick);
							  
							  var cityname=$(".city_a").eq(0).html();
							  $.ajax({
						       	  type: "POST",
								  data:"cityname="+cityname,
								  url: "__CONTROLLER__/area",
								  dataType: "json",
								  success:function(county){
									  //$(".city_a").eq(0).addClass("active");
									  $("#alabel").html("地区&nbsp&nbsp");
									  for(var i=0;i<county.area.length;i++){
										if(i==8){
											$("#alabel").append("<br>");
											for(var j=0;j<10;j++){
												$("#alabel").append("<span>&nbsp</span>");
											}
										}
										if(i==16){
											$("#alabel").append("<br>");
											for(var j=0;j<10;j++){
												$("#alabel").append("<span>&nbsp</span>");
											}
										}
										if(i==0){
											$("#alabel").append("<a class='btn active area_a' href='javascript:;'>"+county.area[i]+"</a>");
										}else{
									  		$("#alabel").append("<a class='btn area_a' href='javascript:;'>"+county.area[i]+"</a>");
										}
									  }
								  }
							  });
							  
						  }else{
							  $("#clabel").html(""); 
							  $.ajax({
						       	  type: "POST",
								  data:"cityname="+name,
								  url: "__CONTROLLER__/area",
								  dataType: "json",
								  success:function(county){
									  //$(".city_a").eq(0).addClass("active");
									  $("#alabel").html("地区&nbsp&nbsp");
									  for(var i=0;i<county.area.length;i++){
										if(i==8){
											$("#alabel").append("<br>");
											for(var j=0;j<10;j++){
												$("#alabel").append("<span>&nbsp</span>");
											}
										}
										if(i==16){
											$("#alabel").append("<br>");
											for(var j=0;j<10;j++){
												$("#alabel").append("<span>&nbsp</span>");
											}
										}
										if(i==0){
											$("#alabel").append("<a class='btn active area_a' href='javascript:;'>"+county.area[i]+"</a>");
										}else{
									  		$("#alabel").append("<a class='btn area_a' href='javascript:;'>"+county.area[i]+"</a>");
										}
									  }
									  $(".area_a").click(areaClick);
								  }
							  });
						  }
						  
						 
					  }
				});
			});
			
			$(".city_a").click(cityClick);
			function cityClick(){
				var name=$(this).html();
				$("#clabel .active").removeClass("active");
				$(this).addClass("active");
				$.ajax({
					 type: "POST",
					 data:"cityname="+name,
					 url: "__CONTROLLER__/area",
					 dataType: "json",
					 success:function(county){
						  $("#alabel").html("地区&nbsp&nbsp");
						  for(var i=0;i<county.area.length;i++){
							if(i==8){
								$("#alabel").append("<br>");
								for(var j=0;j<10;j++){
									$("#alabel").append("<span>&nbsp</span>");
								}
							}
							if(i==16){
								$("#alabel").append("<br>");
								for(var j=0;j<10;j++){
									$("#alabel").append("<span>&nbsp</span>");
								}
							}
							if(i==0){
								$("#alabel").append("<a class='btn active area_a' href='javascript:;'>"+county.area[i]+"</a>");
							}else{
						  		$("#alabel").append("<a class='btn area_a' href='javascript:;'>"+county.area[i]+"</a>");
							}
						  }
						  $(".area_a").click(areaClick);
					 }
				});
			}
			
			$(".area_a").click(areaClick);
			function areaClick(){
				var name=$(this).html();
				$("#alabel .active").removeClass("active");
				$(this).addClass("active");
			}
			
			$(".rent").click(function(){
				var name=$(this).html();
				$("#rlabel .active").removeClass("active");
				$(this).addClass("active");
			});
			
			$(".type").click(function(){
				var name=$(this).html();
				$("#tlabel .active").removeClass("active");
				$(this).addClass("active");
			});
			
	 });
  </script>
</html>
